<template lang="html">
  <div class="">
      <breadcrumb :breadItem1="breadItem1" :breadItem2="breadItem2"></breadcrumb>
      <br>
      <div class="shadowed-box">
        <!-- <h4>订单基础信息</h4> -->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="订单基础信息" name="1">
        <table class="pure-table pure-table-bordered">
        <colgroup>
            <col width="10%">
            <col width="24%">
            <col width="9%">
            <col width="24%">
            <col width="9%">
            <col width="24%">
        </colgroup>
        <thead>

        </thead>
        <tbody>
        <tr>
            <td>订单编号:</td>
            <td>{{orderCode}}</td>
            <td>客户信息:</td>
            <td>{{userName}}</td>
            <td>状态:</td>
            <td>{{statusStr}}</td>
        </tr>
        <tr>
            <td>项目名称:</td>
            <td>{{projectName}}</td>
            <td>楼盘名称:</td>
            <td>{{propertyName}}</td>
            <td>渠道:</td>
            <td>
                {{agentSourceStr}}
            </td>
        </tr>
        <tr>
            <td>经纪人姓名:</td>
            <td>{{creatorName}}</td>
            <td>经纪人号码:</td>
            <td>{{creatorMobile}}</td>
            <td>归属小组:</td>
            <td>{{creatorOrgInfo}}</td>
        </tr>
        <tr>
            <td>案场专员姓名:</td>
            <td>{{agentName}}</td>
            <td>案场专员号码:</td>
            <td>{{agentMobile}}</td>
            <td>归属组:</td>
            <td>{{agentOrgInfo}}</td>
        </tr>
        <tr>
            <td>关联联系人:</td>
            <td colspan="5">{{contacts}}</td>
        </tr>
        <tr>
            <td>备注:</td>
            <td colspan="5">{{memo}}</td>
        </tr>
        <tr>
            <td>预约时间:</td>
            <td colspan="5">{{createTime}}</td>
        </tr>
        </tbody>
    </table>
    <table class="pure-table pure-table-bordered ">
        <colgroup>
            <col width="5%">
            <col width="10%">
            <col width="5%">
            <col width="10%">
            <col width="5%">
            <col width="10%">
        </colgroup>
        <thead>
        <tr>
            <th colspan="6">订单佣金信息
                    <button v-if="F_Applyadjustmentcommission && canCommissionChange" id="commissionChangeApplyBtn" style="float: right;" onclick="commissionChangeApply()">调佣申请
                    </button>
                </th>

        </tr>
        </thead>
        <tbody>
        <tr>
            <td>合同应收:</td>
            <td>{{calExpression}}&nbsp;元</td>
            <td>开票金额:</td>
            <td>{{invoicePrice}}&nbsp;元
            <a v-if="F_Newhouseorderlistdetails" id="invoiceList" style="float: right;text-decoration: underline">开票详情</a></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>应收佣金:</td>
            <td><label style="color:red;">{{realReceivableCommission}}</label>&nbsp;元 <a v-if="F_Newhouseorderlistdetails" id="commsionChangeList"
                                                                                                style="float: right;text-decoration: underline">调佣详情</a>
            </td>
            <td>实收佣金:</td>
            <td><label style="color:red;">{{commissionReceived}}</label>&nbsp;元 <a v-if="F_Newhouseorderlistdetails" id="commsionList"
                                                                                          style="float: right;text-decoration: underline">收佣明细</a>
            </td>
            <td>结佣日期:</td>
            <td>{{commissionDate}}</td>
        </tr>
        </tbody>
    </table>

    <table v-if="showOtherCommission" class="pure-table pure-table-bordered ">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="6">加盟佣金信息
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>成交产品:</td>
                <td>
                        {{dealProdName}}
                </td>
                <td>应发佣金:</td>
                <td>
                        {{fbhCalExpression}}&nbsp;元<a v-if="F_Newhouseorderlistdetails" id="fbhCommsionChangeList" style="float: right;text-decoration: underline">调佣记录</a>
                </td>
                <td>已发佣金:</td>
                <td>
                    <label style="color:red;">{{commissionPayed}}&nbsp;元</label><a v-if="F_Newhouseorderlistdetails" id="fbhCommsionList"
                                                                                                      style="float: right;text-decoration: underline">发佣明细</a>
                </td>
            </tr>
            </tbody>
        </table>
        </el-collapse-item>
        <el-collapse-item title="客户状态跟进信息" name="2">
        <table v-if="showInvalidInfo" class="pure-table pure-table-bordered ">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="4">失效 跟进日期:{{invalidFollowTime}}
                    操作人:{{invalidOperInfo}}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>失效原因:</td>
                <td colspan="3">{{invalidDesc}}</td>
            </tr>
            </tbody>
        </table>

        <table v-if="showDealInfo" class="pure-table pure-table-bordered ">
            <colgroup >
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="4" style="width:100%;">成交 跟进日期:{{dealFollowTime}} 操作人:{{dealOperInfo}}</th>
            </tr>
            </thead>
            <tbody style="">
            <tr>
                <td>产品:</td>
                <td>{{dealProdName}}</td>
                <td>成交合同编号:</td>
                <td>{{dealContractCode}}</td>
            </tr>
            <tr>
                <td>户型:</td>
                <td>{{houseLayout}}</td>
                <td>室号:</td>
                <td>{{address}}</td>
            </tr>
            <tr>
                <td>面积:</td>
                <td>{{spaceArea}}平米</td>
                <td>合同金额:</td>
                <td>{{dealContractPrice}}&nbsp;元</td>
            </tr>
            <tr>
                <td>成交日期:</td>
                <td colspan="3">{{dealDate}}</td>
            </tr>
                 <tr v-if="showOrderImage">
                         <td colspan="4">
                            <orderImage v-for="(img,index) in dealImages" :img="img" :imgType="dealImageType"></orderImage>
                         </td>
                </tr>

            </tbody>
        </table>
        <table v-if="showBookInfo" class="pure-table pure-table-bordered ">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="4">认购 跟进日期:{{bookFollowTime}} 操作人:{{bookOperInfo}}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>产品:</td>
                <td>{{bookProdName}}</td>
                <td>认购合同编号:</td>
                <td>{{bookContractCode}}</td>
            </tr>
            <tr>
                <td>认购金额:</td>
                <td>{{bookPrice}}&nbsp;元</td>
                <td>购买总价:</td>
                <td>{{bookTotalPrice}}&nbsp;元</td>
            </tr>
            <tr>
                <td>预计收佣:</td>
                <td>{{bookPossibleCommission}}&nbsp;元</td>
                <td>认购日期:</td>
                <td>{{bookDate}}</td>
            </tr>
                <tr v-if="showBookImg">
                  <orderImage v-for="(img,index) in bookImages" :img="img" :imgType="bookImageType"></orderImage>
                </tr>
            </tbody>
        </table>

        <table v-if="showVisitInfo" class="pure-table pure-table-bordered ">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="4">到访 跟进日期:{{visitFollowTime}} 操作人:{{visitOperInfo}}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>到访日期:</td>
                <td>{{visitDate}}</td>
                <td colspan="2">
                  <orderImage :img="visitImage" :imgType="visitImageType"></orderImage>
                </td>
            </tr>
            </tbody>
        </table>

        <table v-if="showApplyInfo" class="pure-table pure-table-bordered ">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th colspan="4">报备 跟进日期:{{applyFollowTime}} 操作人:{{applyOperInfo}}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>报备日期:</td>
                <td colspan="3">{{applyDate}}</td>
            </tr>
            </tbody>
        </table>
        </el-collapse-item>
        </el-collapse>
      </div>
  </div>
</template>

<script>
import breadcrumb from '../../Breadcrumb.vue'
import orderImage from './orderImage.vue'
export default {
    data() {
        return {
            breadItem1: '项目订单管理',
            breadItem2: '订单详情',
            dealImageType: '成交合同照片',
            bookImageType: '认购合同照片',
            visitImageType: '到访确认单照片',
            orderCode: '',
            userName: '',
            statusStr: '',
            projectName: '',
            propertyName: '',
            creatorName: '',
            creatorMobile: '',
            creatorOrgInfo: '',
            agentName: '',
            agentMobile: '',
            agentOrgInfo: '',
            contacts: '',
            memo: '',
            createTime: '',
            agentSourceStr: '',
            calExpression: '',
            invoicePrice: '',
            realReceivableCommission: '',
            commissionReceived: '',
            commissionDate: '',
            showOtherCommission: true,
            fbhCalExpression: '',
            commissionPayed: '',
            showInvalidInfo: false,
            invalidFollowTime: '',
            invalidOperInfo: '',
            invalidDesc: '',
            showDealInfo: false,
            dealProdName: '',
            dealContractCode: '',
            houseLayout: '',
            address: '',
            spaceArea: '',
            dealContractPrice: '',
            dealDate: '',
            dealFollowTime: '',
            dealOperInfo: '',
            showOrderImage: false,
            dealImages: [],
            showBookInfo: false,
            bookFollowTime: '',
            bookOperInfo: '',
            prodName: '',
            bookContractCode: '',
            bookPrice: '',
            bookTotalPrice: '',
            bookPossibleCommission: '',
            bookDate: '',
            showBookImg: false,
            bookImages: [],
            showVisitInfo: false,
            visitFollowTime: '',
            visitOperInfo: '',
            visitDate: '',
            visitImage: '',
            showApplyInfo: false,
            applyFollowTime: '',
            applyOperInfo: '',
            applyDate: '',
            F_Applyadjustmentcommission: false,
            F_Newhouseorderlistdetails: false,
            canCommissionChange: false,
            activeNames: ['1','2']

        }
    },
    created: function() {
        let _this = this;
        let functionCodes = ['F_Applyadjustmentcommission', 'F_Newhouseorderlistdetails'];
        var functionPermissions = getFunctionPermissionVue(functionCodes);
        if (!functionPermissions) {
            showMsg(serverError);
            return false;
        }
        _this.F_Applyadjustmentcommission = functionPermissions.F_Applyadjustmentcommission;
        _this.F_Newhouseorderlistdetails = functionPermissions.F_Newhouseorderlistdetails;
        let url = basePath + 'order/customer/detailVue?id=' + _this.$route.params.orderId;
        $.ajax({
            type: 'get',
            url: url,
            success: function(data) {
                console.log(data);
                console.log(_this);
                if (data && data.errorCode != 0) {
                    showMsg(data.message);
                    return false;
                }
                _this.orderCode = data.orderCode;
                _this.userName = data.userName;
                _this.statusStr = data.statusStr;
                _this.projectName = data.projectName;
                _this.propertyName = data.propertyName;
                _this.creatorName = data.creatorName;
                _this.creatorMobile = data.creatorMobile;
                _this.creatorOrgInfo = data.creatorOrgInfo;
                _this.agentName = data.agentName;
                _this.agentMobile = data.agentMobile;
                _this.agentOrgInfo = data.agentOrgInfo;
                _this.contacts = data.contacts;
                _this.memo = data.memo;
                _this.createTime = data.createTime;
                if (data.agentSource == 1) {
                    _this.agentSourceStr = '爱屋吉屋';
                } else if (data.agentSource == 2) {
                    _this.agentSourceStr = '房伯虎';
                } else {
                    _this.agentSourceStr = '未知';
                }
                _this.calExpression = data.calExpression;
                _this.invoicePrice = data.invoicePrice;
                _this.realReceivableCommission = data.realReceivableCommission;
                _this.commissionReceived = data.commissionReceived;
                _this.commissionDate = data.commissionDate;
                //TODO
                // _this.showOtherCommission = data.agentSource == 2 && (data.status == 5 || data.status == 10)
                let dealInfo = data.dealInfo;
                _this.dealProdName = dealInfo.prodName;
                _this.fbhCalExpression = data.fbhCalExpression;
                _this.commissionPayed = data.commissionPayed;
                if (data.invalidInfo) {
                    _this.showInvalidInfo = true;
                    _this.invalidFollowTime = data.invalidInfo.invalidFollowTime;
                    _this.invalidOperInfo = data.invalidInfo.invalidOperInfo;
                    _this.invalidDesc = data.invalidInfo.invalidDesc;
                }
                if (dealInfo) {
                    _this.showDealInfo = true;
                    _this.dealProdName = dealInfo.prodName;
                    _this.dealContractCode = dealInfo.dealContractCode;
                    _this.houseLayout = dealInfo.houseLayout;
                    _this.address = dealInfo.address;
                    _this.spaceArea = dealInfo.spaceArea;
                    _this.dealContractPrice = dealInfo.dealContractPrice;
                    _this.dealDate = dealInfo.dealDate;
                    _this.dealFollowTime = dealInfo.dealFollowTime;
                    _this.dealOperInfo = dealInfo.dealOperInfo;
                    let dealImages = dealInfo.dealOrderImageList;
                    if (dealImages) {
                        _this.showOrderImage = true;
                        _this.dealImages = dealImages;
                    }
                }
                let bookInfo = data.bookInfo;
                if (bookInfo) {
                    _this.showBookInfo = true;
                    _this.bookFollowTime = bookInfo.bookFollowTime;
                    _this.bookOperInfo = bookInfo.bookOperInfo;
                    _this.bookProdName = bookInfo.prodName;
                    _this.bookContractCode = bookInfo.bookContractCode;
                    _this.bookPrice = bookInfo.bookPrice;
                    _this.bookTotalPrice = bookInfo.bookTotalPrice;
                    _this.bookPossibleCommission = bookInfo.bookPossibleCommission;
                    _this.bookDate = bookInfo.bookDate;
                    if (bookInfo.bookImageList) {
                        _this.showBookImg = true;
                        _this.bookImages = bookInfo.bookImageList;
                    }
                }
                let visitInfo = data.visitInfo;
                if (visitInfo) {
                    _this.showVisitInfo = true;
                    _this.visitFollowTime = visitInfo.visitFollowTime;
                    _this.visitOperInfo = visitInfo.visitOperInfo;
                    _this.visitDate = visitInfo.visitDate;
                    _this.visitImage = visitInfo.visitImg;
                }
                let applyInfo = data.applyInfo;
                if (applyInfo && data.status != 2) {
                    _this.showApplyInfo = true;
                    _this.applyFollowTime = applyInfo.applyFollowTime;
                    _this.applyOperInfo = applyInfo.applyOperInfo;
                    _this.applyDate = applyInfo.applyDate;
                }
                _this.canCommissionChange = data.canCommissionChange;



            },
            error: function(data) {
                showMsg(serverError);
            }
        });
    },
    components: {
        'breadcrumb': breadcrumb,
        'orderImage': orderImage
    }
}
</script>

<style lang="css">
.el-collapse-item__header{
  font-weight: bold;
  font-size: 16px;
}
th{
  text-align: left;
}
</style>
